<template>
  <div>
    <nav-header></nav-header>
    <nav-bread>
      <span slot="bread">水果列表</span>
    </nav-bread>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">

          <div class="search">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item >
                <el-input style="padding-left: 5px"  v-model="key" placeholder="   水果名称">
                  <i slot="prefix" style="display: flex;">
                    <img
                      class="header-icon"
                      style="width:30px;height:40px"
                      src="../../static/loading-svg/searchLG.png"
                      alt="" />
                  </i>
                </el-input>
                <el-button type="primary" icon="el-icon-search" @click="search" style="float: right;position: absolute;top: 0%;left: 105%;">查询</el-button>
              </el-form-item>
            </el-form>
          </div>

          <span class="sortby">排序:</span>
          <a href="javascript:void(0)" class="price" @click="sortGoods">价格
            <svg class="icon-arrow-short" v-bind:class="{'sort-up':!sortFlag}">
              <use xlink:href="#icon-arrow-short">
                <svg id="icon-arrow-short" viewBox="0 0 25 32" width="100%" height="100%">
                  <title>arrow-short</title>
                  <path
                    d="M24.487 18.922l-1.948-1.948-8.904 8.904v-25.878h-2.783v25.878l-8.904-8.904-1.948 1.948 12.243 12.243z"
                    class="path1"></path>
                </svg>
              </use>
            </svg>
          </a>
<!--          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>-->

        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}">
            <dl class="filter-price">
              <dt style="font-size: 15px;color: #41040a"> <i class="el-icon-menu"></i>水果类目:</dt>
              <dd><a href="javascript:void(0)" @click="setCategory(null)"
                     v-bind:class="{'cur':priceChecked==null}">全部</a></dd>
              <dd v-for="price in Category">
                <a href="javascript:void(0)" @click="setCategory(price.name)"
                   v-bind:class="{'cur':priceChecked==price.name}">{{price.name}}</a>
              </dd>
            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">

<!--              推荐跑马灯-->
              <div class="block" v-if="showRecommendList">
                <el-carousel trigger="click" height="250px">
                  <el-carousel-item v-for="item in recommendList" :key="item">
                    <div style="position: relative;">
                      <span v-model="Src" style="visibility: hidden">{{item["image"]}}</span>
                      <a href="#" :title="item.name" @click="showGood(item)"><img style="width: 300px;height: 300px" :src="('http://localhost:8080/file/image/'+item['image'] )" alt=""></a>
                    </div>
                    <div style="position: relative;z-index:1;width: 20%;transform: translate3d(280%,-150%,0);font-size: 20px;color: #e84040;font-family: 黑体">
                      <img style="width: 80%;height: 60%" :src="('http://localhost:8080/file/image/特别推荐.jpg')" alt="">
                      <hr>
                      <div class="name" style="font-size: 30px">{{item.name}}</div>
                      <div class="source">原产地：{{item.source}}</div>
                      <div class="price">单价：{{item.price}}/Kg</div>
                      <div class="price">促销价：{{item.price*item.discount/10}}/Kg</div>
                    </div>
                  </el-carousel-item>
                </el-carousel>
                <br>
              </div>

              <ul>
                <li v-for="item in goodsList">
                  <div class="pic">
                    <a href="#" :title="item.FDays" @click="showGood(item)"><img :src="('http://localhost:8080/file/image/'+item['image'] )" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{item.name}}</div>
                    <div class="source">原产地：{{item.source}}</div>
                    <div class="price" style="font-size: 23px">单价：{{item.price}}/Kg</div>
                    <div class="price" style="font-size: 25px">促销价：{{item.price*item.discount/10}}/Kg</div>
<!--                    <div class="stock" style="position: relative;left: 15%">库存：{{item.stock}}Kg</div>-->
                    <div style="display:inline-block;transform: translate3d(4%,25%,0);position: relative;">
                      <el-form  style="width: 30%;display:inline-block">
                        <el-form-item style="width: 20%">
                          <el-input-number size="mini" v-model="item.weight" :precision="1" :step="0.1" :min="0.5" :max="10" label="添加重量" style="position: relative;left:-100%;width: 700%"></el-input-number>
                        </el-form-item>
                      </el-form>
                      <a href="javascript:;" style="width: 60%;position:relative;left: 7%;display:inline-block;border-radius: 20px" class="btn btn--m" @click="addCart(item.id,item.weight)">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
              <div class="load-more" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"
                   infinite-scroll-distance="20">
                <img src="./../../static/loading-svg/loading-spinning-bubbles.svg" v-show="loading">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--    <div class="md-overlay" v-show="overLayFlag" @click="closePop">-->
<!--      <modal v-bind:mdShow="mdShow" v-on:close="closeModal">-->
<!--        <p slot="message">请先登录，否则无法加入到购物车中！</p>-->
<!--        <div slot="btnGroup">-->
<!--          <a class="btn btn&#45;&#45;m" href="javascript:;" @click="mdShow=false">关闭</a>-->
<!--        </div>-->
<!--      </modal>-->
<!--    </div>-->
    <modal v-bind:mdShow="overLayFlag" v-on:close="closeModal">
      <p slot="message">请先登录，否则无法加入到购物车中！</p>
      <div slot="btnGroup">
        <a class="btn btn--m" href="javascript:;" @click="overLayFlag=false">关闭</a>
      </div>
    </modal>

    <FruitInfoModal style="z-index: 2" v-if="mdShowDesc" v-on:close="closeModal">
      <div slot="modal-header">
        <h1>名称：{{currentItem.name}} &nbsp&nbsp <span style="font-size: 20px">添加重量(Kg):&nbsp</span></h1>
          <div style="position: relative;left:100%;top: -60%;width: 30%">
            <el-input-number style="width: 100%"  size="mini" v-model="currentItem.weight" :precision="1" :step="0.1" :min="0.5" :max="10" label="添加重量"></el-input-number>
          </div>
        <el-button  @click="addCart(currentItem.id,currentItem.weight)" type="danger" style="position:relative;transform: translate3d(470%,-170%,0)">加入购物车</el-button>
        <button class="md-close" @click="mdShowDesc=false" style="position: relative;font-size: 30px;transform: translate3d(1750%,-200%,0)"><i class="el-icon-circle-close"></i></button>
      </div>
      <div slot="modal-body-left">
        <div class="message">
          <p style="color: red">¥{{currentItem.price}}元/Kg</p>
          <p >产地：{{currentItem.source}}</p>
          <p >库存：{{currentItem.stock}}Kg</p>
          <p >储存方式：{{currentItem.storage}}</p>
          <p >介绍：{{currentItem.introduction}}</p>
        </div>
        <div class="image">
          <p ><img :src="('http://localhost:8080/file/image/'+currentItem.image )" style="width:200px;height:200px;" alt=""></p>
        </div>

      </div>
      <div slot="modal-body-right">
        <p>好评率：{{currentItem.positiveRate}}%</p>

        <el-table
          ref="multipleTable"
          :data="appraises"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          @selection-change=""
        >
          <el-table-column prop="cid" label="用户" min-width="40%"></el-table-column>
          <el-table-column label="评级" min-width="80%">
            <template slot-scope="scope">
              <el-rate v-model=scope.row.rate disabled show-text></el-rate>
            </template>
          </el-table-column>
          <el-table-column prop="appraise" label="评价内容"></el-table-column>
          <el-table-column prop="salesTime" label="时间"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          style="margin-top: 20px;text-align: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1,3, 5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </FruitInfoModal>


    <modal v-bind:mdShow="mdShowCart" v-on:close="closeModal">
      <p slot="message">
        <svg class="icon-status-ok">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
          <svg id="icon-status-ok" viewBox="0 0 32 32" width="100%" height="100%"><title>status-ok</title>
            <path
              d="M22.361 10.903l-9.71 9.063-2.998-2.998c-0.208-0.209-0.546-0.209-0.754 0s-0.208 0.546 0 0.754l3.363 3.363c0.104 0.104 0.241 0.156 0.377 0.156 0.131 0 0.261-0.048 0.364-0.143l10.087-9.414c0.215-0.201 0.227-0.539 0.026-0.754s-0.539-0.226-0.754-0.026z"
              class="path1"></path>
            <path
              d="M16 30.933c-8.234 0-14.933-6.699-14.933-14.933s6.699-14.933 14.933-14.933c8.234 0 14.933 6.699 14.933 14.933s-6.699 14.933-14.933 14.933zM16 0c-8.822 0-16 7.178-16 16 0 8.823 7.178 16 16 16s16-7.177 16-16c0-8.822-7.178-16-16-16z"
              class="path2"></path>
            <title>status-ok</title>
            <path
              d="M22.361 10.903l-9.71 9.063-2.998-2.998c-0.208-0.209-0.546-0.209-0.754 0s-0.208 0.546 0 0.754l3.363 3.363c0.104 0.104 0.241 0.156 0.377 0.156 0.131 0 0.261-0.048 0.364-0.143l10.087-9.414c0.215-0.201 0.227-0.539 0.026-0.754s-0.539-0.226-0.754-0.026z"
              class="path1"></path>
            <path
              d="M16 30.933c-8.234 0-14.933-6.699-14.933-14.933s6.699-14.933 14.933-14.933c8.234 0 14.933 6.699 14.933 14.933s-6.699 14.933-14.933 14.933zM16 0c-8.822 0-16 7.178-16 16 0 8.823 7.178 16 16 16s16-7.177 16-16c0-8.822-7.178-16-16-16z"
              class="path2"></path>
          </svg>
        </svg>
        <span>加入购物车成功！</span>
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m" href="javascript:;" @click="mdShowCart=false;mdShowDesc=false">继续购物</a>
        <router-link class="btn btn--m" href="javascript:;" to="/cart">查看购物车</router-link>
      </div>
    </modal>
    <nav-footer></nav-footer>
  </div>
</template>

<script>
import NavHeader from "./../components/NavHeader";
import NavFooter from "./../components/NavFooter";
import NavBread from "./../components/NavBread";
import Modal from "./../components/Modal";
import axios from "axios"
import FruitInfoModal from "../components/FruitInfoModal.vue";
import Src from "vue-infinite-scroll";

export default {
  computed: {
    Src() {
      return Src
    }
  },
  data() {
    return {
      temp:1,     //1:执行获取所有，2:执行查询
      key:"",
      recommendList: [],
      showRecommendList: true,
      goodsList: [],
      Category: [],
      priceChecked: null,
      filterBy: false,
      overLayFlag: false,
      busy: true,
      sortFlag: true, //代表升序
      page: 1,
      size: 8,
      loading: false,
      mdShow: false,
      mdShowCart: false,
      mdShowDesc: false,
      currentItem: {},
      currentPage:1,
      pageSize:5,
      total:0,
      currenFruitId:"",
      appraises:[]
    };
  },
  components: {
    NavHeader,
    NavFooter,
    NavBread,
    Modal,
    FruitInfoModal
  },
  mounted: function() {
    this.getRecommend();
    this.getGoodsList();
    this.getCategoryList();
  },
  methods: {
    showGood(item) {
      this.currentItem = item;
      this.getAppraise(item.id);
      this.mdShowDesc = true;
    },
    //获得水果评论
    getAppraise(FruitId){
      this.currenFruitId = FruitId;
      let params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        fid: FruitId
      };
      axios.post("/order/getAppraises",params,{ headers:{content:"application/json;charset=UTF-8" }})
        .then(response =>{
          if (response.status === 200){
            //接收后端返回的数据总条数 total 和 对应页码的数据 data
            let { total, data } = response.data;
            this.total = total;
            console.log(data);
            if(data != "这里是空的"){
              this.appraises = data;
            }
            // 如果当前页没有数据 且 排除第一页
            if (!data.length && this.currentPage !== 1) {
              //页码减去1
              this.currentPage -= 1;
              //再调自己
              this.getAppraise(FruitId);
            }
          }else {
           this.appraises = [];
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获得所有水果类别
    getCategoryList() {
      this.$axios
        .get("/fruit/getCategories")
        .then(result => {
          var res = result;
          if (res.status === 200) {
            this.Category = res.data;
          } else {
            this.Category = [];
          }
        })
        .catch(function(error) {
          console.log("error init." + error);
        });
    },
    //获得推荐水果信息
    getRecommend(flag) {
      axios.get('/fruit/getRecommend')
        .then(result => {
          this.loading = false;
          if (result.status === 200) {
            this.recommendList = result.data.data;
            console.log(this.recommendList.length);
          } else {
            this.goodsList = [];
          }
        })
        .catch(function(error) {
          console.log("error init." + error);
        });
    },
    //获得所有水果信息
    getGoodsList(flag) {
      this.temp = 1;
      this.key = null;
      this.loading = true;
      var params = {
        FCategory: this.priceChecked,
        currentPage: this.page,
        pageSize: this.size,
        sort: this.sortFlag ? 1 : -1,
        keyWord:""
      };
      if (this.priceChecked === null){
        this.showRecommendList = true;
      }else {
        this.showRecommendList = false;
      }
      axios.post('/fruit/getAllFruit',params)
        .then(result => {
          this.loading = false;
          var res = result.data;
          if (result.status === 200) {
            var tempGoodslist = [];
            if (flag) {
              tempGoodslist = res.data;
              this.goodsList = this.goodsList.concat(tempGoodslist);
              if (tempGoodslist === 0) {
                this.busy = true;
              } else {
                this.busy = false;
              }
            } else {
              tempGoodslist = res.data;
              this.goodsList = tempGoodslist;
              this.busy = false;
            }
          } else {
            this.goodsList = [];
          }
        })
        .catch(function(error) {
          console.log("error init." + error);
        });
    },
    // 水果名称查询
    search(){
      this.temp = 2;
      this.priceChecked = null;
      this.page = 1;
      this.size = 100;
      var params = {
        FCategory: this.priceChecked,
        currentPage: this.page,
        pageSize: this.size,
        sort: this.sortFlag ? 1 : -1,
        keyWord:this.key
      };
      this.showRecommendList = false;
      axios.post('/fruit/getAllFruit',params)
        .then(result => {
          this.loading = false;
          var res = result.data;
          if (result.status === 200) {
            var tempGoodslist = [];
            if (true) {
              tempGoodslist = res.data;
              this.goodsList = tempGoodslist;
              if (tempGoodslist === 0) {
                this.busy = true;
              } else {
                this.busy = false;
                }
            } else {
              tempGoodslist = res.data;
              this.goodsList = tempGoodslist;
              this.busy = false;
            }
          } else {
            this.goodsList = [];
          }
        })
        .catch(function(error) {
          console.log("error init." + error);
        });
    },
    showFilterPop() {
      this.filterBy = true;
      this.overLayFlag = true;
    },
    setCategory(name) {
      this.priceChecked = name;
      this.closePop();
      this.page = 1;
      this.getGoodsList();
    },
    closePop() {
      this.filterBy = false;
      this.overLayFlag = false;
      this.mdShowDesc = false;
      this.appraises = [];
    },
    loadMore() {
      this.busy = true;
      setTimeout(() => {
        if (this.temp === 1) {
          this.page++;
          this.getGoodsList(true);
        }
      }, 500);
    },
    sortGoods() {
      this.sortFlag = !this.sortFlag;
      this.page = 1;
      if (this.temp === 1){
        this.getGoodsList();
      }else {
        this.search();
      }
    },
    //加入购物车
    addCart(fruitId, weight) {
      if(sessionStorage.getItem("user") != null){
        console.log(weight);
        var params = {
          customerId:JSON.parse(sessionStorage.getItem("user")).id,
          fruitId: fruitId,
          weight: weight
        };
        axios.post("/customer/addCart", params,{ headers:{content:"application/json;charset=UTF-8" }})
          .then(result => {
            var res = result.data;
            if (res.code === 0) {
              console.log(this.mdShowCart);
              this.mdShowCart = true;
              this.$store.commit("updateCartCount", 1);
            } else {
              this.$message.error(res.reason);
              this.mdShow = true;
            }
          })
          .catch(function(error) {
            console.log("error init." + error);
          });
      }else {
        this.overLayFlag = true;
      }
    },
    closeModal() {
      this.mdShow = false;
      this.mdShowCart = false;
      this.mdShowDesc = false;
      this.overLayFlag = false;
    },
    //每页显示条数改变触发的函数
    handleSizeChange(val) {
      //保存每页显示的条数
      this.pageSize = val;
      //调用分页函数
      this.getAppraise(this.currenFruitId);
    },
    //当前页码改变触发的函数
    handleCurrentChange(val) {
      //保存当前页码
      this.currentPage = val;
      //调用分页函数
      this.getAppraise(this.currenFruitId);
    }
  },
  //过滤器
  filters: {
    //过滤时间的函数
    filterCtime(ctime) {
      return moment(ctime).format("YYYY-MM-DD HH:mm:ss");
    }
  }
};
</script>

<style>
.block{
  //width: 80%;
  height: 40%;
}
.image{
  position: relative;
  top: -30%;
  left: 50%;
  transform: translateY(-30%);
}
.message{
  position: relative;
  top: 5%;
  width: 40%;
}
.message p{
  height: 30px;
  font-size: 20px;
  font-family: 黑体;
}
.search{
  position: relative;
  left: -62%;
  top: 10%;
  height: 0%;
}
.demo-form-inline{
  top: 10%;
  line-height: 1px;
  padding-left: 0%;
}
.load-more {
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.sort-up {
  transform: rotate(180deg);
  transition: all 0.3s ease-out;
}

.icon-arrow-short {
  width: 11px;
  height: 11px;
  transition: all 0.3s ease-out;
}
</style>
